<template>
  <ul class="indexSideBar" ref="siteBar">
    <li class="firstItem">- 热销榜 -</li>
    <li class="item">
      <img
        src="https://yanxuan.nosdn.127.net/d83d6cc58589e7b9540e57809920d961.png?quality=95&type=webp&imageView"
        alt=""
      />
      <span>全站<br />热销榜</span>
    </li>
    <li class="item">
      <img
        src="https://yanxuan.nosdn.127.net/288d84fe691240d9f87271b293f39b67.png?quality=95&type=webp&imageView"
        alt=""
      />
      <span>居家<br />生活榜</span>
    </li>
    <li class="item">
      <img
        src="https://yanxuan.nosdn.127.net/2318b65e996e14bc0707880040dfabb0.png?quality=95&type=webp&imageView"
        alt=""
      />
      <span>服饰<br />鞋包榜</span>
    </li>
    <li class="item">
      <img
        src="https://yanxuan.nosdn.127.net/8ca4557361e2fff394a5a94d0b73f3c6.png?quality=95&type=webp&imageView"
        alt=""
      />
      <span>美食<br />酒水榜</span>
    </li>
    <li class="item">
      <img
        src="https://yanxuan.nosdn.127.net/270bc2465ac7eed90ada40c92166678b.png?quality=95&type=webp&imageView"
        alt=""
      />
      <span>数码<br />家电榜</span>
    </li>
    <li class="item">
      <img
        src="https://yanxuan.nosdn.127.net/4723267aef758a7d805bb7c1447fdc44.png?quality=95&type=webp&imageView"
        alt=""
      />
      <span>个护<br />清洁榜</span>
    </li>
    <li class="item">
      <img
        src="https://yanxuan.nosdn.127.net/eec3af53eb17a4b117043e18ae7c7418.png?quality=95&type=webp&imageView"
        alt=""
      />
      <span>运动<br />旅行榜</span>
    </li>
    <li class="item">
      <img
        src="https://yanxuan.nosdn.127.net/a94b2f7f7ada813ae9c93f84d3d60d6f.png?quality=95&type=webp&imageView"
        alt=""
      />
      <span>母婴<br />亲子榜</span>
    </li>
    <li class="item no-border">
      <img
        src="https://yanxuan.nosdn.127.net/9cb33f543dddd54c7cc157d29650dbf4.png?quality=95&type=webp&imageView"
        alt=""
      />
      <span>全球<br />特色榜</span>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'IndexSideBar',
  mounted() {
    window.addEventListener('scroll', (e) => {
      if (window.scrollY >= 560) {
        this.$refs.siteBar && (this.$refs.siteBar.style.position = 'fixed')
        this.$refs.siteBar && (this.$refs.siteBar.style.top = '62px')
      } else {
        this.$refs.siteBar && (this.$refs.siteBar.style.position = 'absolute')
        this.$refs.siteBar && (this.$refs.siteBar.style.top = '445px')
      }
    })
  },
}
</script>

<style lang="less">
.indexSideBar {
  z-index: 99;
  position: absolute;
  top: 445px;
  width: 110px;
  box-sizing: border-box;
  border: 1px solid #e2ded6;
  border-radius: 4px;
  color: #bb3343;
  text-align: center;
  font-weight: 700;
  background-color: #fff;
  .item {
    cursor: pointer;
    margin: 1px 11px 0;
    height: 35px;
    display: flex;
    border-bottom: 1px solid #e2ded6;
    text-align: left;
    justify-content: space-evenly;
    img {
      width: 30px;
      height: 30px;
    }
  }
  .firstItem {
    font-size: 16px;
    cursor: default;
    height: 38px;
    background-color: #fffdf6;
    line-height: 38px;
    border-bottom: 1px solid #e4dfd7;
  }
  .no-border {
    border-style: none;
  }
}
</style>
